<template>
	<!-- 车辆选择 -->
	<view class="container">
		<view class="head-box">
			<up-icon @click="back" class="back-icon" name="arrow-left" color="#0E1624" size="24"></up-icon>
			<view class="title">
				{{nowText}}选择
			</view>
			<view class="tip">
				请选择报名{{nowText}}
			</view>
		</view>
		<scroll-view scroll-y class="scroll-box" v-if="cartList.length">
			<view class="item" v-for="cart in cartList" :key="cart.hphm" @click="changeActiveCart(cart)">
				<view class="left">
					<image class="img" src="/static/img/drivers/cart.png"></image>
					<view class="info">
						<view class="code">
							{{cart.hphm}}
						</view>
						<view class="types">
							<Button2 v-if="cart.energyType === '燃油'" class="type">燃油车</Button2>
							<Button2 v-else class="type green">新能源</Button2>
						</view>
					</view>
				</view>
				<view class="right">
					<up-icon class="selected-icon" v-if="activeCart?.hphm === cart.hphm" name="checkmark-circle-fill"
						color="#2E87FF" size="38"></up-icon>
					<up-icon class="select-icon" v-else name="checkmark-circle-fill" color="#989DA5"
						size="38"></up-icon>
				</view>
			</view>
		</scroll-view>
		<BottomBtn @btnClick="sureCart" class="bottom-box">确认</BottomBtn>
		<messageTip ref="myMessage"></messageTip>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref, watchEffect } from 'vue';
	import Button2 from '@/components/button2/button2.vue';
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import { useUserStore } from '@/stroes';
	import * as orderTakingApi from "@/api/drivers/orderTaking.js"
	const myMessage = ref()
	const userStore = useUserStore()
	// console.log('车辆列表', userStore.cartList);
	const isLogin = ref(false)
	const nowPageInfo = ref({})

	const nowText = computed(() => {
		if (nowPageInfo.value?.type === '2') {
			return '报名车辆'
		} else {
			return '作业车辆'
		}
	})
	onLoad((options) => {
		console.log("穿过案例的",options)
		if (options.type === '1') {
			isLogin.value = true;
		} else {
			nowPageInfo.value = options
			getCarList()
		}
	})
	const cartList = ref()
	// 当前选中的汽车
	const activeCart = ref({})
	watchEffect(() => {
		if (userStore.nowCart.id) {
			activeCart.value = userStore.nowCart
		} else {
			if (userStore.cartList.length) {
				activeCart.value = userStore.cartList[0]
			}
		}
	})
	// 获取司机列表
	
	const getCarList=()=>{
		// carByPlan
		console.log("nowPageInfo",nowPageInfo.value)
		orderTakingApi.carByPlan({ planId:nowPageInfo.value.id,  }).then(res => {
			if (res.data.code === 0) {
				console.log("司机类别",res.data)
				cartList.value=res.data.data
				// myMessage.value.open('success', res.data.msg)
			} else {
				myMessage.value.open('error', res.data.msg)
			}
			
		})
	}

	// 改变选中的汽车
	const changeActiveCart = (cart) => {
		activeCart.value = cart
	}
	const sureCart = () => {
		userStore.nowCart = activeCart.value;
		if (isLogin.value) {
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else if (nowPageInfo.value?.type === '2') {
			orderTakingApi.signUp({ plateNo: activeCart.value.hphm, id: nowPageInfo.value.id, status: nowPageInfo.value.status }).then(res => {
				if (res.data.code === 0) {
					myMessage.value.open('success', res.data.msg)
				} else {
					myMessage.value.open('error', res.data.msg)
				}
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			})
		}

		setTimeout(() => {
			uni.navigateBack()
		}, 1000)

	}
	const back = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.container {
		background: linear-gradient(180deg, #C5E1FF 0%, #EEF6FE 52%, #E8F5FF 100%);

		.head-box {
			padding: 116rpx 32rpx 56rpx;

			.title {
				margin: 75rpx 0rpx 13rpx;
				font-weight: 600;
				font-size: 56rpx;
				color: #000000;
			}

			.tip {
				font-size: 24rpx;
				color: #989DA5;
			}
		}

		.scroll-box {
			height: 1000rpx;
			padding: 0rpx 32rpx;
			box-sizing: border-box;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 30rpx 40rpx;
			border: 4rpx solid #fff;
			border-radius: 32rpx;
			background-color: #E8F3FF;
			// box-sizing: border-box;


			.left {
				display: flex;
				align-items: center;

				.img {
					margin-right: 28rpx;
					width: 100rpx;
					height: 100rpx;
				}

				.info {
					.code {
						margin-bottom: 16rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #000;
					}

					.type {
						margin-right: 8rpx;
					}
				}
			}
		}

		.bottom-box {

			background-color: transparent;
			box-shadow: none;
		}
	}
</style>sss